<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
    String path = request.getContextPath();
			String basePath = request.getScheme() + "://"
					+ request.getServerName() + ":" + request.getServerPort()
					+ path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login Page</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="这是一个 index 页面">
<meta name="keywords" content="index">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="icon" type="image/png" href="assets/i/favicon.png">
<link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
<meta name="apple-mobile-web-app-title" content="Amaze UI" />
<link rel="stylesheet" href="assets/css/amazeui.min.css" />
<link rel="stylesheet" href="assets/css/amazeui.datatables.min.css" />
<link rel="stylesheet" href="assets/css/app.css">
<script src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.tips.js"></script>
<!-- GEETEST验证码js -->
<script src="http://static.geetest.com/static/tools/gt.js"></script>
<!-- GEETEST验证码样式, begin -->
<style>
#embed-captcha {
	width: 300px;
	margin: 0 auto;
}

.show {
	display: block;
}

.hide {
	display: none;
}

#notice {
	color: red;
}
/* 以下遮罩层为demo.用户可自行设计实现 */
#mask {
	display: none;
	position: fixed;
	text-align: center;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	overflow: auto;
}
</style>
<!-- GEETEST验证码样式, end -->
</head>
<body data-type="login">
	<script src="assets/js/theme.js"></script>
	<div class="am-g tpl-g">
		<!-- 风格切换 -->
		<div class="tpl-skiner">
			<div class="tpl-skiner-toggle am-icon-cog"></div>
			<div class="tpl-skiner-content">
				<div class="tpl-skiner-content-title">选择主题</div>
				<div class="tpl-skiner-content-bar">
					<span class="skiner-color skiner-white" data-color="theme-white"></span> <span class="skiner-color skiner-black" data-color="theme-black"></span>
				</div>
			</div>
		</div>
		<div class="tpl-login">
			<div class="tpl-login-content">
				<div class="tpl-login-logo"></div>
				<form class="am-form tpl-form-line-form">
					<div class="am-form-group">
						<input type="text" class="username" placeholder="请输入账号">
					</div>
					<div class="am-form-group">
						<input class="password" type="password" placeholder="请输入密码">
					</div>
					<div class="am-form-group tpl-login-remember-me">
						<input id="remember-me" type="checkbox"> <label for="remember-me"> 记住我 </label>
					</div>
					<div id="embed-captcha"></div>
					<p id="wait" class="show">正在加载验证码......</p>
					<p id="notice" class="hide">请先拖动验证码到相应位置</p>
					<br>
					<div class="am-form-group">
						<button id="embed-submit" type="button" class="am-btn am-btn-primary  am-btn-block tpl-btn-bg-color-success  tpl-login-btn">登录</button>
					</div>
					<div class="am-form-group">
						<button id="embed-register" onclick="location.href='/login_toRegister'" type="button" class="am-btn am-btn-primary  am-btn-block tpl-btn-bg-color-success  tpl-login-btn">注册</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<script src="assets/js/amazeui.min.js"></script>
	<script src="assets/js/app.js"></script>
	<script type="text/javascript">
		function login() {
			var username = $(".username").val().trim();
			var password = $(".password").val().trim();
			var isRememberMe = false;
			//FIXME: Could not read JSON for loginTime, need to fix the issue in future
			//var loginTime = new Date().getTime();
			if ($('#remember-me').is(':checked')) {
				isRememberMe = true;
			}
			var user = {
					"username":username,
					"password":password,
					"isRememberMe":isRememberMe,
					//"loginTime": loginTime
			};
			//var code = username + "," + password + "," + rememberMe;
			$.ajax({
				type : "POST",
				url : '/login',
				data:JSON.stringify(user),
				dataType : 'json',
				contentType:"application/json;charset=utf-8",
				cache : false,
				success : function(data) {
					if ("success" == data.result) {
						//rememberMe();
						$(".tpl-login").tips({
							side : 1,
							msg : '正在登录 , 请稍后 ...',
							bg : '#68B500',
							time : 10
						});
						window.location.href = "/login_toMain";
					} else if ("username-or-pwd-error" == data.result) {
						$(".username").tips({
							side : 1,
							msg : "用户名或密码错误",
							bg : '#FF5080',
							time : 15
						});
						showfh();
						$(".username").focus();
					} else if ("login-failed-so-much-times" == data.result) {
						$(".username").tips({
							side : 1,
							msg : "登录失败次数过多",
							bg : '#FF5080',
							time : 15
						});
						showfh();
						$(".username").focus();
					} else {
						$(".username").tips({
							side : 1,
							msg : "登录异常，请联系系统管理员解决。",
							bg : '#FF5080',
							time : 15
						});
						showfh();
						$(".username").focus();
					}
				}
			});
		}
		//客户端校验
		function checkUsernameAndPwd() {
			if ($(".username").val() == "") {
				$(".username").tips({
					side : 2,
					msg : '用户名不得为空',
					bg : '#AE81FF',
					time : 3
				});
				$(".username").focus();
				return false;
			} else {
				$(".username").val(jQuery.trim($('.username').val()));
			}

			if ($(".password").val() == "") {
				$(".password").tips({
					side : 2,
					msg : '密码不得为空',
					bg : '#AE81FF',
					time : 3
				});
				$(".password").focus();
				return false;
			}
			return true;
		}
		
		/* function rememberMe() {
			if ($('#remember-me').is(':checked')) {
				alert('checked!');
				$.cookie('username', $(".username").val(), {
					expires : 7
				});
				$.cookie('password', $(".password").val(), {
					expires : 7
				});
			}
		} */
		
		var handlerEmbed = function(captchaObj) {
			$("#embed-submit").click(function(e) {
				//先验证用户名密码是否符合验证规则
				if (checkUsernameAndPwd()) {
					var validateCaptcha = captchaObj.getValidate();
					if (!validateCaptcha) {
						$("#notice")[0].className = "show";
						setTimeout(function() {
							$("#notice")[0].className = "hide";
						}, 2000);
						e.preventDefault();
					} else {
						login();
					}
				}
			});
			// 将验证码加到id为captcha的元素里，同时会有三个input的值：geetest_challenge, geetest_validate, geetest_seccode
			captchaObj.appendTo("#embed-captcha");
			captchaObj.onReady(function() {
				$("#wait")[0].className = "hide";
			});
			// 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
		};
		$.ajax({
			// 获取id，challenge，success（是否启用failback）
			url : "pc-geetest/register?t=" + (new Date()).getTime(), // 加随机数防止缓存
			type : "get",
			dataType : "json",
			success : function(data) {
				// 使用initGeetest接口
				// 参数1：配置参数
				// 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
				initGeetest({
					gt : data.gt,
					challenge : data.challenge,
					product : "float", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
					offline : !data.success
				// 表示用户后台检测极验服务器是否宕机，一般不需要关注
				// 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
				}, handlerEmbed);
			}
		});
	</script>
</body>
</html>